/*客户表不分页列表,作者:高振中,日期:2021-03-24 13:28:03*/
<template>
  <el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" :close-on-press-escape="false">
    <h3>客户表</h3>
    <hr />
    <el-form :inline="true">
      <el-form-item label="用户名"><el-input placeholder="请输入用户名" size="mini" v-model="form.username"></el-input></el-form-item>
      <el-form-item label="密码"><el-input placeholder="请输入密码" size="mini" v-model="form.password"></el-input></el-form-item>
      <el-form-item label="微信号"><el-input placeholder="请输入微信号" size="mini" v-model="form.wechat"></el-input></el-form-item>
      <el-form-item label="地址"><el-input placeholder="请输入地址" size="mini" v-model="form.address"></el-input></el-form-item>
      <el-form-item label="头像"><el-input placeholder="请输入头像" size="mini" v-model="form.avatar"></el-input></el-form-item>
      <el-form-item label="备注"><el-input placeholder="请输入备注" size="mini" v-model="form.remark"></el-input></el-form-item>
      <el-form-item label="电话号"><el-input placeholder="请输入电话号" size="mini" v-model="form.tel"></el-input></el-form-item>
      <el-form-item label="会员等级"><el-input placeholder="请输入会员等级" size="mini" v-model="form.levelId"></el-input></el-form-item>
      <el-form-item label="注册时间"><el-input placeholder="请输入注册时间" size="mini" v-model="form.createTime"></el-input></el-form-item>
      <el-form-item label="修改时间"><el-input placeholder="请输入修改时间" size="mini" v-model="form.updateTime"></el-input></el-form-item>
      <el-form-item>
        <el-button size="mini" @click="loadData">查询</el-button>
        <el-button size="mini" @click="doReset">重置</el-button>
        <el-button size="mini" @click="doAdd" type="primary">添加</el-button>
        <el-button size="mini" @click="doDelete(selectIds)" v-if="selectIds.length > 0">删除</el-button>
        <el-button size="mini" @click="doExport" style="margin-right:8px;">导出</el-button>
        <el-upload action="#" :http-request="doImport" :show-file-list="false" style="display:inline-block;"><el-button size="mini">导入</el-button></el-upload>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" v-loading="loading" element-loading-text="正在加载......" @selection-change="selectChange" border size="mini" :row-style="iRowStyle" :cell-style="iCellStyle" :header-row-style="iHeaderRowStyle" :header-cell-style="iHeaderCellStyle">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form>
            <el-row :gutter="10">
              <el-col :span="4"><el-form-item label="用户名">{{props.row.username}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="密码">{{props.row.password}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="微信号">{{props.row.wechat}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="地址">{{props.row.address}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="头像">{{props.row.avatar}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="备注">{{props.row.remark}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="电话号">{{props.row.tel}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="会员等级">{{props.row.levelId}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="注册时间">{{props.row.createTime}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="修改时间">{{props.row.updateTime}}</el-form-item></el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="wechat" label="微信号"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="avatar" label="头像"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="tel" label="电话号"></el-table-column>
      <el-table-column prop="levelId" label="会员等级"></el-table-column>
      <el-table-column prop="createTime" label="注册时间"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="props">
          <div><el-button type="text" size="mini" @click="doEdit(props.row)">编辑</el-button><el-button type="text" size="mini" @click="doDelete([props.row.id])">删除</el-button></div>
        </template>
      </el-table-column>
    </el-table>
    <CustomerDialog ref="dialog" :loadData="loadData"></CustomerDialog>
  </el-dialog>
</template>
<script>
import CustomerDialog from './CustomerDialog.vue';
import { pageMix } from "@/common/page";
export default {
  mixins: [pageMix],
  components: { CustomerDialog }, 
  data: function () {
    return {}
  },
  //computed: {}, mounted(){},
  created: function () {
    this.loadData();
  },
  methods: {
    /**客户表-导出*/
    doExport() {
      const param = { ...this.form };
      this.rq.post("/customer/export", param, { responseType: "blob" }).then((res) => {
        this.downloadFile(res,"客户表.xls")
      });
    },
    /**客户表-导入*/    
    doImport(obj) {
      this.rq.post("/customer/import", obj.file).then((res) => {
        if (res.code == 200) this.loadData();
        else this.$message.error(res.msg);
      });
    },
    /**客户表-查询参数 */
    initForm() {
      return {
        username: null, // 用户名
        password: null, // 密码
        wechat: null, // 微信号
        address: null, // 地址
        avatar: null, // 头像
        remark: null, // 备注
        tel: null, // 电话号
        levelId: null, // 会员等级
        createTime: null, // 注册时间
        updateTime: null, // 修改时间
      };
    },
    /**客户表-分页列表 */
    loadData() {
      this.loading = true;
      const param = { ...this.form};
      this.rq.post("/customer/list", param).then((res) => {
        if (res.code == 200) this.dataList = res.data; //数据列表
        else this.$message.error(res.msg);
      });
      this.loading = false;
    },
     /**客户表-删除 */    
    doDelete(ids) {
      this.$confirm("你确定要删除吗?", "提示", { confirmButtonText: "确定",cancelButtonText: "取消",type: "warning" }).then(() => {
        this.rq.post("/customer/delete", ids).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.loadData();
          } else this.$message.error(res.msg);
        });
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
